<!-- 指导人数限制 -->
<template>
  <div class="edu-page-warp guide-limit">
    <!--新增弹框-->
    <edu-dialog :title="actionType === 'ADD' ? $t('graduationDesign.add'): $t('graduationDesign.modify')" size="small" @close="closeDialog" :visible="guideDialogVisible">
      <el-form :model="guideForm" ref="guideForm" :rules="guideRules" label-position="right" label-suffix="：" label-width="120px">
        <el-row>
          <el-col>
            <el-form-item :label="isGuideLimit() ? $t('graduationDesign.guideLimit') : '申报课题数'" prop="directorsNo">
              <el-input v-model="guideForm.directorsNo" maxlength="11" class="guide-input" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.applicableGraduationYear')" prop="startYear">
              <el-date-picker class="dateclass" clearable v-model="guideForm.startYear" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.pleaseChoose')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div class="guide-wave-line">~</div>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="70px">
              <el-date-picker class="dateclass" clearable v-model="guideForm.endYear" value-format="yyyy" type="year" :placeholder="$t('graduationDesign.pleaseChoose')">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="buttons">
        <el-button @click="closeDialog">{{$t('graduationDesign.cancel')}}</el-button>
        <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.confirm')}}</el-button>
      </div>
    </edu-dialog>
    <el-card shadow="never">
      <div class="edu-page-title">{{ isGuideLimit() ? $t('graduationDesign.tutorGuideLimit') : '导师申报课题数限制'}}</div>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-button type="primary" @click="onAdd">{{$t('graduationDesign.add')}}</el-button>
        </div>
      </div>
      <edu-table ref="tutorGuideLimitTable" :url="getList" :selection="false">
        <edu-table-column :label="isGuideLimit() ? $t('graduationDesign.guideLimit') : '申报课题数限制'" prop="directorsNo" min-width="120"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.applicableGraduationYear')" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.startYear}}~{{scope.row.endYear ? scope.row.endYear : $t('graduationDesign.permanent')}}</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.operation')" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope.row)">{{$t('graduationDesign.edit')}}</el-button>
            <el-button type="text" @click="onDelete(scope.row)">{{$t('graduationDesign.delete')}}</el-button>
          </template>
        </edu-table-column>
      </edu-table>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/tutorGuideLimit";
export default {
  name: 'guideLimit',
  props: {
    limitType: '1'
  },
  data() {
    const validateInteger = (rule, value, callback) => {
      const patternInteger = /^[1-9]\d{0,1}$/;
      if (patternInteger.test(value) || !value) {
        return callback();
      } else {
        return callback(new Error(this.$t('graduationDesign.guideLimitNum')));
      }
    };
    return {
      api: API,
      getList: '/api/designservice/settingTutorDirectorsNo/queryByPage',
      queryForm: {},
      actionType: '',
      guideForm: {},
      guideRules: {
        directorsNo: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: "blur" },
          { validator: validateInteger, trigger: 'blur' }
        ],
        startYear: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: "change" }
        ]
      },
      guideDialogVisible: false
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    isGuideLimit() {
      return this.limitType === '1';
    },
    searchList() {
      this.queryForm.limitType = this.limitType;
      this.$refs.tutorGuideLimitTable.search(this.queryForm);
    },
    reset() {
      this.queryForm = {};
      this.searchList();
    },
    onAdd() {
      this.actionType = "ADD";
      this.guideDialogVisible = true;
      this.guideForm = {};
      this.$nextTick(() => {
        this.$refs.guideForm.clearValidate();
      });
    },
    onEdit(row) {
      this.actionType = "EDIT";
      this.guideDialogVisible = true;
      this.guideForm = { ...row };
      this.guideForm.startYear = row.startYear + "";
      this.guideForm.endYear = row.endYear ? row.endYear + '' : '';
    },
    onDelete(row) {
      this.$delConfirm(this.$t('graduationDesign.deleteConfirm'), this.$t('graduationDesign.prompt')).then(() => {
        const params = { ...row };
        this.api.delete(params).then(res => {
          this.$message.success(this.$t('graduationDesign.deleteSuccess'));
          this.searchList();
        }).catch(() => { });
      }).catch(() => { });
    },
    closeDialog() {
      this.guideDialogVisible = false;
    },
    onSubmit() {
      this.$refs.guideForm.validate((valid) => {
        if (valid) {
          if (this.guideForm.endYear && (this.guideForm.startYear > this.guideForm.endYear)) {
            this.$message.warning(this.$t('graduationDesign.startYearNotGreaterEndYear'));
            return false;
          }
          let promise = null;
          let msg = "";
          if (this.actionType === "ADD") {
            this.guideForm.limitType = this.limitType;
            promise = this.api.insert(this.guideForm);
            msg = this.$t('graduationDesign.addSuccess');
          } else {
            promise = this.api.update(this.guideForm);
            msg = this.$t('graduationDesign.modifySuccess');
          }
          promise.then(res => {
            this.$message.success(msg);
            this.guideDialogVisible = false;
            this.searchList();
          }).catch(() => { });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  .guide-limit {
    .guide-input {
      width: 100%;
    }
    .dateclass {
      width: 100%;
    }
    .guide-wave-line {
      text-align: center;
      width: 100px;
      margin: 8px auto;
    }
  }
</style>
